
$(function () {
    getHt();
    initMap();
})

//获取div的高度
function getHt() {
    var all_height = $(window).height();
    var div_height = all_height - 84;
    $("#car_control").css("height", div_height + "px");
}

var url = 'http://8.138.133.80:5000'

//加载地图
function initMap() {
    // 百度地图API功能

    $.get(url + '/getMapData').done(function (data1) {
        var cityList = ['广州市', '深圳市', '珠海市', '汕头市', '佛山市', '韶关市', '河源市', '梅州市', '惠州市', '汕尾市', '东莞市', '中山市', '江门市', '阳江市', '湛江市', '茂名市', '肇庆市', '清远市', '潮州市', '揭阳市', '云浮市']
        var geoCoordMap = {
            广州市: [113.507649675, 23.3200491021],
            东莞市: [113.863433991, 22.9430238154],
            中山市: [113.422060021, 22.5451775145],
            云浮市: [111.750945959, 22.9379756855],
            佛山市: [113.034025635, 23.0350948405],
            惠州市: [114.41065808, 23.1135398524],
            揭阳市: [116.079500855, 23.3479994669],
            梅州市: [116.126403098, 24.304570606],
            汕头市: [116.588650288, 23.2839084533],
            汕尾市: [115.572924289, 22.9787305002],
            江门市: [112.678125341, 22.2751167835],
            河源市: [114.913721476, 23.9572508505],
            深圳市: [114.025973657, 22.5960535462],
            清远市: [113.040773349, 23.9984685504],
            湛江市: [110.165067263, 21.2574631038],
            潮州市: [116.830075991, 23.7618116765],
            珠海市: [113.262447026, 22.1369146461],
            肇庆市: [112.37965337, 23.5786632829],
            茂名市: [110.931245331, 21.9682257188],
            阳江市: [111.777009756, 21.9715173045],
            韶关市: [113.594461107, 24.8029603119]
        };

        // 百度地图API功能
        var map = new BMap.Map("map");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(113.285, 23.134), 11);    // 初始化地图,设置中心点坐标和地图级别

        //添加地图类型控件
        var size1 = new BMap.Size(10, 50);
        map.addControl(new BMap.MapTypeControl({
            offset: size1,
            mapTypes: [
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP,

            ],
        }));
        map.addControl(new BMap.ScaleControl());
        var traffic = new BMap.TrafficLayer();
        map.addTileLayer(traffic);

        for (let i = 0; i < 21; i++) {
            (function (index) {
                let cityName = cityList[index];
                let point = new BMap.Point(geoCoordMap[cityName][0], geoCoordMap[cityName][1]);
                var marker = new BMap.Marker(point); // 创建标注点
                map.addOverlay(marker); // 将标注点添加到地图上
                var opts = {
                    width: 200,     // 信息窗口宽度
                    height: 120,    // 信息窗口高度
                    title: '<div style="font-size: 16px; color: #333;"><strong>' + cityName + '相关数据</strong></div>' // 信息窗口标题
                };

                let content = '<div style="font-size: 14px; color: #333; padding: 10px;">' +
                    '<p><strong>人口数量:</strong> ' + data1[cityName][0] + '</p>' +
                    '<p><strong>生产总值:</strong> ' + data1[cityName][1] + '</p>' +
                    '<p><strong>AQI达标率:</strong> ' + data1[cityName][2] + '</p>' +
                    '<p><strong>消费水平:</strong> ' + data1[cityName][3] + '</p>' +
                    '</div>';

                // 监听标注点点击事件
                marker.addEventListener("click", function () {
                    var infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
                    map.openInfoWindow(infoWindow, point);
                });
            })(i);
        };


        map.setCurrentCity("广州");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放.

        //加载城市控件
        var size = new BMap.Size(15, 80);
        map.addControl(new BMap.CityListControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            offset: size,
        }));

    });
}